<template>
  <div class="">
    <!-- <el-table :data="tableData" border stripe>
      <el-table-column :prop="id" label="序号" :width="100"> </el-table-column>
    </el-table> -->
    <div class="ui-title ui-mt10">
      <span>项目信息</span>
    </div>
    <div>
      <el-table :data="tableData" max-height="200" min-height="100" :merge-columns="mergeColumns" border stripe>
        <el-table-column type="index" label="序号" align="center" :width="70" />
        <el-table-column prop="projectName" label="项目名称" header-align="center" :min-width="200" />
        <el-table-column prop="projectCode" label="项目编号" header-align="center" :min-width="200" />
        <el-table-column prop="bidSectionName" label="标段名称" header-align="center" :min-width="200" />
        <el-table-column prop="bidSectionCode" label="标段编号" header-align="center" :min-width="200" />
      </el-table>
    </div>
    <div class="ui-title ui-mt10">
      <span>查看信息记录</span>
    </div>
    <div class="message-list">
      <div class="table-box">
        <el-table :data="activities" height="100%" border stripe>
          <el-table-column type="index" :index="indexFn" label="序号" align="center" :width="100">
            <template slot-scope="scope">
              {{ (pageObj.currentPage - 1) * pageObj.pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="operateTime" label="时间" header-align="center" :width="200" />
          <el-table-column prop="witnessInfoContent" label="信息记录" min-width="200" />
          <el-table-column prop="witnessStatus" label="状态" align="center" :width="100">
            <template slot-scope="scope">
              <!-- {{ scope.row }} -->
              <span v-if="scope.row.witnessStatus == 'EXCEPTION'" class="font-red"> 异常 </span>
              <span v-else>正常</span>
              <!-- {{ scope.row.witnessStatus == "EXCEPTION" ? "" : "正常" }} -->
            </template>
          </el-table-column>
          <el-table-column prop="systemName" label="来源" header-align="center" min-width="100" />
        </el-table>
      </div>
    </div>
    <div class="layout-footer ui-pt10">
      <!-- {{ pageObj.total + " " + pageObj.pageSize }} -->
      <pagination
        v-if="pageObj.total > pageObj.pageSizes[0]"
        :total="pageObj.total"
        :page.sync="pageObj.currentPage"
        :limit.sync="pageObj.pageSize"
        :page-sizes="pageObj.pageSizes"
        @pagination="infoRecordQuerylistFn"
      />
    </div>
  </div>
</template>
<script>
  import { projectTaskDetail, infoRecordQuerylist } from "../../api/api";
  export default {
    name: "MessageRecord",
    components: {},
    data() {
      return {
        mergeColumns: [
          {
            key: "projectName",
            conditions: ["projectName"]
          },
          {
            key: "projectCode",
            conditions: ["projectName"]
          },
          {
            key: "bidSectionName",
            conditions: ["projectName", "bidSectionName"]
          }
        ],
        tableData: [],
        activities: [],
        id: this.$route.query.id,
        pageObj: {
          total: 0,
          currentPage: 1,
          pageSize: 10,
          pageSizes: [10, 20, 30]
        }
      };
    },
    created() {
      console.log("dddsss");
      this.projectTaskDetailFn();
      this.infoRecordQuerylistFn();
    },
    methods: {
      initProjectInfoArrFn(list) {
        // let list = res.data.witnessProjectInfoList;
        const Arr = [];
        for (let i = 0; i < list.length; i++) {
          const ei = list[i];
          console.log("ei", ei);
          const Obj = Object.assign({}, ei);
          if (ei.bidSectionInfoList.length == 0) {
            Arr.push(Obj);
            break;
          }
          for (let j = 0; j < ei.bidSectionInfoList.length; j++) {
            const ej = ei.bidSectionInfoList[j];
            const Obj2 = Object.assign({}, Obj);
            Obj2.bidSectionName = ej.bidSectionName;
            Obj2.bidSectionCode = ej.bidSectionCode;
            Arr.push(Obj2);
          }
        }
        return Arr;
        // this.$set(this.detailData, "projectInfoArr", Arr);
      },
      // 见证-全部信息
      async projectTaskDetailFn() {
        console.log("ddd");
        this.tableData = [];
        const p = {
          // currentPage: this.pageObj.currentPage, // 当前页数
          pageSize: this.pageObj.pageSize, // 每页条数
          witnessTaskId: this.id
        };
        if (!this.id) {
          return;
        }
        try {
          const res = await projectTaskDetail(p);
          if (res.success) {
            this.tableData = this.initProjectInfoArrFn(res.data.witnessProjectInfoList);
            // res.data.witnessProjectInfoList;
          } else {
            this.$message({
              type: "error",
              message: res.message || "获取数据失败，请稍后再试",
              single: true
            });
          }
        } catch (err) {
          console.error(err);
          this.$message({
            type: "error",
            message: "获取数据失败，请稍后再试",
            single: true
          });
        }
      },
      indexFn(index) {
        return index + 1 + (this.pageObj.currentPage - 1) * this.pageObj.pageSize;
      },
      // 见证-全部信息
      async infoRecordQuerylistFn() {
        this.activities = [];
        const p = {
          currentPage: this.pageObj.currentPage, // 当前页数
          pageSize: this.pageObj.pageSize, // 每页条数
          // pageSize: -1, // 每页条数
          witnessTaskId: this.id
        };
        if (!this.id) {
          return;
        }
        try {
          const res = await infoRecordQuerylist(p);
          if (res.success) {
            this.pageObj.total = res.data.pageBean.count;
            // this.activitiesNoDataFlag = !res.data.data.length;
            this.activities = res.data.data;
            // this.activitiesOld = [].concat(res.data.data);
          } else {
            this.$message({
              type: "error",
              message: res.message || "获取数据失败，请稍后再试",
              single: true
            });
          }
        } catch (err) {
          console.error(err);
          this.$message({
            type: "error",
            message: "获取数据失败，请稍后再试",
            single: true
          });
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .message-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 0;
    .table-box {
      overflow: auto;
      height: 100%;
    }
  }
</style>
